<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>好味道</title>
    <link rel="icon" href="./images/favicon.ico">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0,user-scalable=no,minimal-ui">
    <link rel="stylesheet" href="./icon/font_4120520_1naq85lz2kn/iconfont.css">
    <link rel="stylesheet" href="styles/vant.min.css"/>

    <style>
        *{
            margin: 0;
            padding: 0;
        }
        html{
            width: 100%;
            height: 100%;
        }
        body{
            position: relative;
            width: 100%;
            height: 100%;
            background-image: url("../backend/images/img_denglu_bj.jpg");
            z-index: 9999;
            backdrop-filter: blur(10px);
        }
        #main{
            position: absolute;
            left: 50%;
            top: 50%;
            transform: translate(-50%,-50%);
        }

        .login{
            width: 330px;
            height: 100px;
            position: absolute;
            left: 50%;
            bottom:90px;
            transform: translate(-50%);
            display: flex;
            flex-direction: column;
        }
        .login div{
            flex: 1;
            border-radius: 10px;
            display: flex;
            justify-content: center;
            align-items: center;
            font-size: 13px;
            font-weight: 500;
            color: #5daf34;
            background-color: rgb(211, 211, 211);
        }
        .login .weixin{
            margin-top:7px;
        }
        .input{
            text-align: center;
            width: 100%;
            position: absolute;
            left: 50%;
            bottom: 30px;
            transform: translate(-50%);
            font-size: 3px;
            display: flex;
            align-items: center;
            justify-content: center;
            color: lavender;
            font-weight: 300;
        }
        .inputs{
            background: none;
            margin-right: 5px;
        }
        #main{
            position: relative;
            width: 100%;
            height: 100%;
        }
        .title{
            position: absolute;
            top: 200px;
            left: 50%;
            top: 25%;
            transform: translate(-50%,-25%);
        }
    </style>
</head>

<body>
<div id="main">
    <div class="login" style="display: none">
        <div class="shouji"><span><span style="margin-right: 5px" class="iconfont icon-shouji"></span> 手机号登入</span></div>
        <div class="weixin"><span><span style="margin-right: 10px" class="iconfont icon-weixin"></span>微信登入</span></div>
    </div>
    <p class="input"><input class="inputs" type="checkbox">我已阅读并同《用户协议》和《隐私协议》</p>
    <div id="mains" class="title" style="width: 100%;height:100px;"></div>
</div>



<script src="../backend/plugins/vue/vue.js"></script>
<script src="./js/jquery-2.1.0.js"></script>
<script src="./js/echarts.min.js"></script>
<script src="./js/vant.min.js"></script>
<script>
    new Vue({
        el:'#main',
        data(){
            return {
                check:false
            }
        },
        methods:{

        },
        computed:{
        },
        watch:{

        },
        created(){

        },
        mounted(){
            this.check=document.querySelector(".inputs").checked
            var _this=this
            $(".shouji").on("click",function (){
                console.log(_this.check)
                if(_this.check){
                    window.location.href="./page/login.html";
                }
                else{
                    vant.Toast('请勾选下方勾选按钮');
                }
            })

            $(".inputs").on("click",function (){
                console.log("修改状态")
                _this.check=document.querySelector(".inputs").checked
            })

            $(".login").fadeIn(4000,"linear",function (){
                console.log("完成")
            })

            var myChart = echarts.init(document.getElementById('mains'));

            option = {
                graphic: {
                    elements: [
                        {
                            type: 'text',
                            left: 'center',
                            top: 'center',
                            style: {
                                text: '好味道',
                                fontSize: 80,
                                fontWeight: 'bold',
                                lineDash: [0, 200],
                                lineDashOffset: 0,
                                fill: 'transparent',
                                stroke: '#a21e5a',
                                lineWidth: 1
                            },
                            keyframeAnimation: {
                                duration: 4000,
                                loop: true,
                                keyframes: [
                                    {
                                        percent: 0.7,
                                        style: {
                                            fill: 'transparent',
                                            lineDashOffset: 200,
                                            lineDash: [200, 0]
                                        }
                                    },
                                    {
                                        // Stop for a while.
                                        percent: 0.8,
                                        style: {
                                            fill: 'transparent'
                                        }
                                    },
                                    {
                                        percent: 1,
                                        style: {
                                            fill: "#86233c"
                                        }
                                    }
                                ]
                            }
                        }
                    ]
                }
            };
            myChart.setOption(option);
        },
    })
</script>

<script type="text/javascript">

</script>
</body>
</html>